<template>
  <view class="cm-page">
    <!-- 头部统计 -->
    <view class="stats">
      <view class="card">
        <view class="label">累计佣金</view>
        <view class="value">¥ {{ stats.total || 0 }}</view>
      </view>
      <view class="card">
        <view class="label">可提现</view>
        <view class="value accent">¥ {{ stats.available || 0 }}</view>
        <uv-button size="mini" type="primary" shape="circle" class="mt8" @tap="applyWithdraw" :loading="withdrawing">申请提现</uv-button>
      </view>
      <view class="card">
        <view class="label">本月佣金</view>
        <view class="value">¥ {{ stats.month || 0 }}</view>
      </view>
    </view>

    <!-- 明细列表 -->
    <scroll-view
      class="list"
      scroll-y
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <uv-empty v-if="!loading && details.length===0" mode="data" text="暂无佣金明细" />

      <view v-for="it in details" :key="it.id" class="item">
        <view class="row1">
          <text class="title">{{ it.title || '订单分佣' }}</text>
          <text class="amount" :class="{ inc: (it.amount||0) > 0 }">{{ (it.amount>0?'+':'') + (it.amount||0) }}</text>
        </view>
        <view class="row2">
          <text class="time">{{ it.time || it.created_at || '-' }}</text>
          <uv-tags v-if="it.status" :text="statusText(it.status)" :type="statusType(it.status)" size="mini" plain />
        </view>
      </view>

      <view class="loadmore" v-if="!loading && hasMore">上拉加载更多</view>
      <view class="pad" />
    </scroll-view>
  </view>
</template>

<script setup>
// 中文注释：团长佣金管理（uv-ui）
import { ref, onMounted } from 'vue'
import { leaderApi } from '@/api/index.js'

const stats = ref({ total: 0, available: 0, month: 0 })
const details = ref([])
const page = ref(1)
const pageSize = ref(10)
const hasMore = ref(true)
const loading = ref(false)
const refreshing = ref(false)
const withdrawing = ref(false)

const fetchStats = async () => {
  try {
    const data = await leaderApi.getCommissionStats()
    stats.value = data || {}
  } catch (e) {}
}

const fetchDetails = async () => {
  if (loading.value || !hasMore.value) return
  loading.value = true
  try {
    const data = await leaderApi.getCommissionDetails({ page: page.value, page_size: pageSize.value })
    const items = Array.isArray(data?.list) ? data.list : []
    details.value = page.value === 1 ? items : [...details.value, ...items]
    hasMore.value = items.length === pageSize.value
    page.value++
  } catch (e) {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
    if (refreshing.value) refreshing.value = false
  }
}

const onRefresh = () => {
  if (refreshing.value) return
  refreshing.value = true
  page.value = 1
  hasMore.value = true
  Promise.all([fetchStats(), fetchDetails()])
}

const loadMore = () => fetchDetails()

const applyWithdraw = async () => {
  if (withdrawing.value) return
  withdrawing.value = true
  try {
    await leaderApi.applyWithdraw({ amount: stats.value.available })
    uni.showToast({ title: '已申请提现', icon: 'none' })
    fetchStats()
  } catch (e) {
    uni.showToast({ title: '提现失败', icon: 'none' })
  } finally {
    withdrawing.value = false
  }
}

const statusText = (s) => ({ settled: '已结算', pending: '待结算', rejected: '已拒绝' }[s] || s)
const statusType = (s) => ({ settled: 'success', pending: 'warning', rejected: 'error' }[s] || 'primary')

onMounted(() => { fetchStats(); fetchDetails() })
</script>

<style scoped lang="scss">
.cm-page { min-height: 100vh; background: $uni-bg-color-grey; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12rpx; padding: 16rpx; }
.card { background: #fff; border-radius: 16rpx; padding: 20rpx; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06); display: flex; flex-direction: column; align-items: flex-start; }
.label { color: #999; font-size: 22rpx; }
.value { margin-top: 6rpx; font-size: 32rpx; font-weight: 700; color: #1f2d3d; }
.value.accent { color: $uni-color-primary; }
.mt8 { margin-top: 8rpx; }

.list { height: calc(100vh - 220rpx); padding: 0 16rpx; box-sizing: border-box; }
.item { background: #fff; border-radius: 16rpx; padding: 20rpx; margin: 12rpx 0; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06); }
.row1 { display: flex; justify-content: space-between; align-items: center; }
.title { font-size: 28rpx; color: #222; font-weight: 600; }
.amount { font-size: 28rpx; color: #e23; }
.amount.inc { color: #16c79a; }
.row2 { display: flex; justify-content: space-between; align-items: center; margin-top: 8rpx; color: #666; font-size: 24rpx; }
.loadmore { text-align: center; color: #999; padding: 20rpx 0; }
.pad { height: 40rpx; }
</style>
